<template>
	<view class="container">
		<view class="header">
			<view class="title">申请详情</view>
			<view class="subtitle">停车服务申请详细信息</view>
		</view>
		
		<view class="detail-card" v-if="application">
			<!-- 申请状态 -->
			<view class="status-section">
				<view :class="['status-tag', getStatusClass(application.status)]">{{ getStatusText(application.status) }}</view>
				<view class="application-id">申请编号: {{ application.application_id }}</view>
			</view>
			
			<!-- 基本信息 -->
			<view class="section">
				<view class="section-title">基本信息</view>
				<view class="info-row">
					<text class="info-label">申请日期:</text>
					<text class="info-value">{{ formatDate(application.application_time) }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">期望开始日期:</text>
					<text class="info-value">{{ application.expected_start_date }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">租赁时长:</text>
					<text class="info-value">{{ application.expected_duration }}个月</text>
				</view>
				<view class="info-row" v-if="application.approval_opinion">
					<text class="info-label">申请备注:</text>
					<text class="info-value">{{ application.approval_opinion }}</text>
				</view>
			</view>
			
			<!-- 车辆信息 -->
			<view class="section" v-if="application.vehicle">
				<view class="section-title">车辆信息</view>
				<view class="info-row">
					<text class="info-label">车牌号码:</text>
					<text class="info-value">{{ application.vehicle.plate_number }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">车辆类型:</text>
					<text class="info-value">{{ application.vehicle.vehicle_type }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">品牌型号:</text>
					<text class="info-value">{{ application.vehicle.brand }} {{ application.vehicle.model }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">车辆颜色:</text>
					<text class="info-value">{{ application.vehicle.color }}</text>
				</view>
			</view>
			
			<!-- 审核信息 -->
			<view class="section" v-if="application.status !== 'pending'">
				<view class="section-title">审核信息</view>
				<view class="info-row" v-if="application.status === 'rejected'">
					<text class="info-label">拒绝原因:</text>
					<text class="info-value">{{ application.approval_opinion || '无' }}</text>
				</view>
				<view class="info-row" v-if="application.contract_id">
					<text class="info-label">合同编号:</text>
					<text class="info-value">{{ application.contract_id }}</text>
				</view>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-section">
				<button class="action-btn cancel-btn" v-if="application.status === 'pending'" @click="cancelApplication">取消申请</button>
				<button class="action-btn primary-btn" v-if="application.status === 'initial_approved'" @click="fillContract">填写合同</button>
				<button class="action-btn back-btn" @click="goBack">返回列表</button>
			</view>
		</view>
		
		<!-- 加载中 -->
		<view class="loading" v-if="isLoading">
			<text>加载中...</text>
		</view>
		
		<!-- 错误提示 -->
		<view class="error-state" v-if="loadError">
			<text class="error-text">{{ loadError }}</text>
			<button class="retry-btn" @click="loadDetail">重新加载</button>
		</view>
		
		<!-- 使用自定义合同弹窗组件 -->
		<contract-popup 
			:show="showContractPopup" 
			@close="closeContractPopup" 
			@submit="submitContract"
		></contract-popup>
	</view>
</template>

<script>
	import { getParkingApplicationDetail, cancelParkingApplication, submitParkingContract } from '@/api/parking.js'
	import ContractPopup from '@/components/contract-popup.vue'
	
	export default {
		components: {
			ContractPopup
		},
		data() {
			return {
				applicationId: null,
				application: null,
				isLoading: true,
				loadError: null,
				showContractPopup: false
			}
		},
		onLoad(options) {
			// 从路由参数获取申请ID
			if (options.id) {
				this.applicationId = options.id
				this.loadDetail()
			} else {
				this.loadError = '未找到申请ID'
				this.isLoading = false
			}
		},
		methods: {
			// 加载申请详情
			loadDetail() {
				this.isLoading = true
				this.loadError = null
				
				getParkingApplicationDetail(this.applicationId)
					.then(response => {
						console.log('获取申请详情成功:', response)
						if (response && response.data) {
							this.application = response.data
						} else {
							this.loadError = '未找到申请详情'
						}
					})
					.catch(err => {
						console.error('获取申请详情失败', err)
						this.loadError = err.message || '加载申请详情失败'
					})
					.finally(() => {
						this.isLoading = false
					})
			},
			
			// 取消申请
			cancelApplication() {
				uni.showModal({
					title: '取消确认',
					content: '确定要取消此停车申请吗？',
					confirmText: '确定取消',
					confirmColor: '#ff4d4f',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中...'
							})
							
							cancelParkingApplication(this.applicationId)
								.then(() => {
									uni.hideLoading()
									uni.showToast({
										title: '申请已取消',
										icon: 'success'
									})
									// 刷新详情
									this.loadDetail()
								})
								.catch(err => {
									uni.hideLoading()
									console.error('取消申请失败', err)
									uni.showToast({
										title: err.message || '取消失败',
										icon: 'none'
									})
								})
						}
					}
				})
			},
			
			// 填写合同
			fillContract() {
				// 再次验证状态是否为初审通过
				if (this.application.status !== 'initial_approved') {
					uni.showToast({
						title: '只有初审通过的申请才能填写合同',
						icon: 'none'
					})
					return
				}
				
				this.showContractPopup = true
			},
			
			// 关闭合同弹窗
			closeContractPopup() {
				this.showContractPopup = false
			},
			
			// 提交合同
			submitContract() {
				uni.showLoading({
					title: '提交中...'
				})
				
				// 调用API提交合同
				submitParkingContract(this.applicationId, {
					contract_id: 1 // 默认合同ID为1
				})
					.then(() => {
						uni.hideLoading()
						this.closeContractPopup()
						uni.showToast({
							title: '合同提交成功',
							icon: 'success'
						})
						// 刷新详情
						this.loadDetail()
					})
					.catch(err => {
						uni.hideLoading()
						console.error('提交合同失败', err)
						uni.showToast({
							title: err.message || '提交失败',
							icon: 'none'
						})
					})
			},
			
			// 返回列表
			goBack() {
				uni.navigateBack()
			},
			
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return '未知'
				const date = new Date(dateString)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待审批',
					'initial_approved': '初审通过',
					'rejected': '已拒绝',
					'contract_pending': '待审核',
					'approved': '已通过',
					'cancelled': '已取消'
				}
				return statusMap[status] || status
			},
			
			// 获取状态样式类
			getStatusClass(status) {
				const classMap = {
					'pending': 'status-pending',
					'initial_approved': 'status-initial-approved',
					'rejected': 'status-rejected',
					'contract_pending': 'status-contract-pending',
					'approved': 'status-approved',
					'cancelled': 'status-cancelled'
				}
				return classMap[status] || ''
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 26rpx;
		color: #666;
	}
	
	.detail-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.status-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.status-tag {
		font-size: 28rpx;
		font-weight: bold;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
	}
	
	.application-id {
		font-size: 28rpx;
		color: #666;
	}
	
	.section {
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.info-row {
		display: flex;
		margin-bottom: 15rpx;
	}
	
	.info-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
	
	.action-section {
		display: flex;
		justify-content: flex-end;
		margin-top: 30rpx;
	}
	
	.action-btn {
		margin-left: 20rpx;
		font-size: 28rpx;
		padding: 15rpx 30rpx;
		border-radius: 8rpx;
	}
	
	.primary-btn {
		background-color: #1890ff;
		color: #fff;
	}
	
	.cancel-btn {
		background-color: #f5f5f5;
		color: #ff4d4f;
	}
	
	.back-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.error-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.error-text {
		font-size: 28rpx;
		color: #ff4d4f;
		margin-bottom: 20rpx;
	}
	
	.retry-btn {
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		background-color: #1890ff;
		color: #fff;
		border-radius: 6rpx;
	}
	
	.status-pending {
		color: #1890ff;
		background-color: #e6f7ff;
	}
	
	.status-initial-approved {
		color: #52c41a;
		background-color: #f6ffed;
	}
	
	.status-rejected {
		color: #f5222d;
		background-color: #fff1f0;
	}
	
	.status-contract-pending {
		color: #fa8c16;
		background-color: #fff7e6;
	}
	
	.status-approved {
		color: #52c41a;
		background-color: #f6ffed;
	}
	
	.status-cancelled {
		color: #999;
		background-color: #f5f5f5;
	}
</style> 